<style>
    *{
        margin: 0;
        padding: 0;
    }
    .all{
        margin: 5px;
    }
    .top{
        width: 430px;
        height: 50px;
        border: 1px solid;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .t1{
        width: 360px;
        height: 25px;
        border: 1px solid;

    }
    .t11{
        background-image: url(../图片素材/xiecheng-sprite.png);
        background-repeat: no-repeat;
        background-position: -118px -558px;
    }
    .t1p{
        position: relative;
        top: 0;
        left: 25px;
    }
    .t2{
        width: 30px;
        height: 40px;
       
        background-image: url(../图片素材/xiecheng-sprite.png);
        background-repeat: no-repeat;
        background-position: -65px -220px;
        background-size: 120px;
    }
    .t1p2{
        font-size: 15px;
        position: relative;
        top: 25px;
        left: 0;
        color: lightskyblue;
    }
    .banner{
        width: 430px;
        height: 75px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-focus.jpg);
        background-size: cover;
    }
    .play{
        width: 430px;
        height: 75px;
        border: 1px solid;
        display: flex;
        justify-content: space-around;
        align-items: center;
       
    }
    .j1{
        width: 35px;
        height: 45px;
        
        background-image: url(../图片素材/xiecheng-localnav_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 10px;
        position: relative;
        top: -4px;
        left: 9px;
    }
    .j3{
        width: 35px;
        height: 45px;
        
        background-image: url(../图片素材/xiecheng-localnav_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 10px;
        position: relative;
        top: -4px;
        left: 9px;
    }
    .j4{
        width: 35px;
        height: 45px;
        
        background-image: url(../图片素材/xiecheng-localnav_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 10px;
        position: relative;
        top: -4px;
        left: 9px;
    }
    .j5{
        width: 35px;
        height: 45px;
        
        background-image: url(../图片素材/xiecheng-localnav_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 10px;
        position: relative;
        top: -4px;
        left: 9px;
    }
    .j6{
        width: 35px;
        height: 45px;
        
        background-image: url(../图片素材/xiecheng-localnav_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 10px;
        position: relative;
        top: -4px;
        left: 9px;
    }
    .j2{
        width: 60px;
        height: 15px;
        
        font-size: 13px;
    }
    .hotel{
        width: 430px;
        height: 275px;
        border: 1px solid;
    }
    .htop{
        width: 430px;
        height: 90px;
        display: flex;
        
        align-items: center;
        justify-content: space-between;
    }
    .htleft{
        width: 140px;
        height: 90px;
        
        background-color: lightcoral;
        background-image: url(../图片素材/xiecheng-hotel.png);
        background-repeat: no-repeat;
        background-position: 4px 29px;
        background-size: contain;
        color: white;
        display: flex;
        
        
    }
    .htright{
        width: 280px;
        height: 90px;
        
        display: flex;
    }
    .htright [class^='htr']{
        width: 136px;
        height: 40px;
        margin: 2px;
        display: flex;
        
        line-height: 45px;
       
        justify-content: center;
        background-image: linear-gradient(to right,rgb(255, 115, 0),orange);
        color: white;
    }
    .hmiddle{
        
        display: flex;
       
    }
    .hbottom{
        
        display: flex;
    }

    .wifi{
        width: 430px;
        height: 115px;
        
    }
    .wtop{
        width: 430px;
        height: 55px;
        
        display: flex;
    }
    .i{
        width: 85px;
        
        background-image: url(../图片素材/xiecheng-subnav-bg.png);
        background-repeat: no-repeat;
        background-size: 40px;
        background-position: 20px 10px;
    }
    .dhf{
        position: relative;
        top: 33px;
        left: 15px;
        font-size: 16px;
    }
    .wbottom{
        width: 430px;
        height: 55px;
        
        display: flex;
    }
    .hot{
        width: 430px;
        height: 60px;
        border: 1px solid;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hot1{
        width: 100px;
        height: 30px;
        background-image: url(../图片素材/xiecheng-hot.png);
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: 5px -19px;
        
    }
    .hot2{
        width: 130px;
        height: 30px;
        background-color: palevioletred;
        border-radius: 20px;
        
    }
    .hot2p{
        color: white;
        align-items: center;
        line-height: 30px;
    }

    .but{
        width: 430px;
        height: 315px;
        border: 1px solid;
    }
    .but1{
        width: 430px;
        height: 110px;
        border: 1px solid;
        display: flex;
    }
    .left1{
        width: 215px;
        height: 110px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-pic1.jpg);
        background-repeat: no-repeat;
        background-size: 180px;
    }
    .right1{
        width: 215px;
        height: 110px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-pic2.jpg);
        background-repeat: no-repeat;
        background-size: 180px;
    }
    .but2{
        width: 430px;
        height: 100px;
        border: 1px solid;
        display: flex;
    }
    .left2{
        width: 215px;
        height: 100px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-pic3.jpg);
        background-repeat: no-repeat;
        background-size: 210px;
    }
    .right2{
        width: 215px;
        height: 100px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-pic4.jpg);
        background-repeat: no-repeat;
        background-size: 210px;
    }
    .but3{
        width: 430px;
        height: 100px;
        border: 1px solid;
        display: flex;
    }
    .left3{
        width: 215px;
        height: 100px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-pic5.jpg);
        background-repeat: no-repeat;
        background-size: 210px;
    }
    .right3{
        width: 215px;
        height: 100px;
        border: 1px solid;
        background-image: url(../图片素材/xiecheng-pic6.jpg);
        background-repeat: no-repeat;
        background-size: 210px;
    }
</style>
</head>
<body>
<div class="all">
    <div class="top">
        <div class="t1"><div class="t11"><p class="t1p">搜索：目的地/酒店/景点/航班</p></div></div>
        <div class="t2"><p class="t1p2">我的</p></div>
    </div>
    <div class="banner"></div>
    <div class="play">
        <div class="p1">
            <div class="j1"></div>
            <div class="j2">景点.玩乐</div>
        </div>
        <div class="p1">
            <div class="j3"></div>
            <div class="j2">景点.玩乐</div>
        </div>
        <div class="p1">
            <div class="j4"></div>
            <div class="j2">景点.玩乐</div>
        </div>
        <div class="p1">
            <div class="j5"></div>
            <div class="j2">景点.玩乐</div>
        </div>
        <div class="p1">
            <div class="j6"></div>
            <div class="j2">景点.玩乐</div>
        </div>
    </div>
    <div class="hotel">
        <div class="htop">
            <div class="htleft">海外酒店</div>
            <div class="htright">
                <div class="hh1">
                <div class="htr1">海外酒店</div>
                <div class="htr2">海外酒店</div></div>
                <div class="hh2">
                <div class="htr3">特价酒店</div>
                <div class="htr4">特价酒店</div></div>
            </div>
        </div>
        <div class="hmiddle">
            <div class="htleft">海外酒店</div>
            <div class="htright">
                <div class="hh1">
                <div class="htr1">海外酒店</div>
                <div class="htr2">海外酒店</div></div>
                <div class="hh2">
                <div class="htr3">特价酒店</div>
                <div class="htr4">特价酒店</div></div>
            </div>
        </div>
        <div class="hbottom">
            <div class="htleft">海外酒店</div>
            <div class="htright">
                <div class="hh1">
                <div class="htr1">海外酒店</div>
                <div class="htr2">海外酒店</div></div>
                <div class="hh2">
                <div class="htr3">特价酒店</div>
                <div class="htr4">特价酒店</div></div>
            </div>
        </div>
    </div>
    <div class="wifi">
        <div class="wtop">
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
        </div>
        <div class="wbottom">
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
            <div class="i"><p class="dhf">电话费</p></div>
        </div>
    </div>
    <div class="hot">
        <div class="hot1"></div>
        <div class="hot2"><p class="hot2p">获取更多福利></p></div>
    </div>
    <div class="but">
        <div class="but1">
            <div class="left1"></div>
            <div class="right1"></div>
        </div>
        <div class="but2">
            <div class="left2"></div>
            <div class="right2"></div>
        </div>
        <div class="but3">
            <div class="left3"></div>
            <div class="right3"></div>
        </div>
    </div>
</div>
</body>